<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%> --%>



<html>
<head>
<title>aaaaa</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
</head>
<body>
<h2>Hello World!</h2>

<a href="showEmployeeByAjax" onclick="return showEmployee();">显示全部雇员信息</a>
<a href="showEmployeeByAjax" id ="ajax">ajax显示全部雇员信息</a>

<p id = "A1"></p><br/>
<p id = "A2"></p><br/>
<p id = "A3"></p><br/>

<form>
	<table border="1px" id = "empTable">
</form>


<script type="text/javascript">
	/* var xmlhttp;
	function loadXML(url){
		
		if(window.XMLHttpRequest){
			xmlhttp=new XMLHttpRequest();
		}else if (window.ActiveXObjec){
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		if(xmlhttp != null){
			xmlhttp.onreadystatechange = state_change;
			xmlhttp.open("GET", url , true);
			xmlhttp.send(null);
		}
		else{
			alert("Your browser does not support XMLHTTP");
		}
		
	}
	
	//回调函数
	function state_change(){
		if(xmlhttp.readyState == 4 ){
			if(xmlhttp.status == 200){
				
				var textData = xmlhttp.responseText;
				alert(textData);
				var jsonData = eval("("+textData+")");
				var empTable = document.getElementById("empTable");
				var str = "<tr><th>编号</th><th>姓名</th><th>工作</th><th>经理</th><th>入职时间</th><th>薪水</th><th>部门</th><th>操作</th></tr>";
				//alert(jsonData);
				for(var i = 0 ; i < jsonData.length;i++){
					
					//alert(jsonData[i].hiredate+"<br/>");
					//将 "时间戳" 转换为 "年月日" 的格式.
				  	da = new Date(jsonData[i].hiredate);
				    var year = da.getFullYear();
				    var month = da.getMonth()+1;
				    var date = da.getDate();
				    date_s = year+"-"+month+"-"+date;
				    //或者是
				  
				    //alert(date_s);
					
					//遍历循环
					 str+="<tr><td>"+jsonData[i].empNo+
					"</td><td>"+jsonData[i].ename+
					"</td><td>"+jsonData[i].job+
					"</td><td>"+(jsonData[i].mgr ==null?"":jsonData[i].mgr.ename)+
					"</td><td>"+date_s+
					"</td><td>"+jsonData[i].sal+
					"</td><td>"+(jsonData[i].department.dname==null?"":jsonData[i].department.dname)+
					"</td><td><a href = 'toDetails/"+ jsonData[i].empNo+"'>修改</a><a href = ''>删除</a></td></tr>"; 
				}
				empTable.innerHTML= str;
			}
		 
			else{
				alert("Problem retrieving XML data:"+ xmlhttp.status);
			}
		}
			
	}
	
	function showEmployee(){
		loadXML("getAllEmployeeByAjax");
		return false;
	} */
	
	
	$(document).ready(function(){
		
		//$("#ajax").click(function(){
		$(function(){
			$.ajax({
				type:"GET",
				url:"getAllEmployeeByAjax",
				async:true,
				contentType:"json",
				success:function(data){
					//alert(data);
					var $empTable = $("#empTable");
					var str = "<tr><th>编号</th><th>姓名</th><th>工作</th><th>经理</th><th>入职时间</th><th>薪水</th><th>部门</th><th>操作</th></tr>";
					$.each(data, function(i, element){
						
						da = new Date(element.hiredate);
					    var year = da.getFullYear();
					    var month = da.getMonth()+1;
					    var date = da.getDate();
					    date_s = year+"-"+month+"-"+date;
					    
						str+="<tr><td class = 'empNo'>"+element.empNo+
						"</td><td>"+element.ename+
						"</td><td>"+element.job+
						"</td><td>"+(element.mgr ==null?"":element.mgr.ename)+
						"</td><td>"+date_s+
						"</td><td>"+element.sal+
						"</td><td>"+(element.department.dname==null?"":element.department.dname)+
						"</td><td><a href = 'toDetails/"+ element.empNo+"'>修改</a><a class='del' href = ''>删除</a></td></tr>"; 
					});
					console.log(str);
					$empTable.append(str);
					
					/* 删除
					 */
					$(".del").click(function(){	
						var $empNo = $(this).parent().parent().children('.empNo').html();
						console.log($empNo);
						var $tr = $(this).parent().parent();
						$.ajax({
							url:"deleteEmpById/"+$empNo ,
							type:"POST",
							//data:{"empNo":empNo},
							success:function(data){
								//alert(data);
								$tr.remove();
							},
							error:function(){
								alert("失败");
							}
							
						});
						return false;
					});
					
				},
				error:function(){
					alert("错误");
				}
			});
			return false;
		});
		
		
		
	});
</script>




</body>
</html>
